<template>
  <div class="habit-detail" v-if="store.currentHabit">
    <div class="habit-detail-header">
      <div class="habit-detail-icon">
        <img :src="store.currentHabit?.icon || ''" alt="" class="icon" />
      </div>
      <div class="habit-detail-title title">{{ store.currentHabit?.name }}</div>
    </div>
    <HabitGoal></HabitGoal>
    <HabitCheck></HabitCheck>
  </div>
</template>

<script setup lang="ts">
import HabitGoal from '@renderer/components/habit/HabitGoal.vue'
import HabitCheck from '@renderer/components/habit/HabitCheck.vue'
import habitStore from '@renderer/store/habit'

const store = habitStore()
</script>

<style scoped lang="scss">
.habit-detail {
  height: 100%;
  width: calc(100% - 750px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: var(--xz-secondbg);

  .habit-detail-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    gap: 10px;

    .habit-detail-icon {
      font-size: 1.2rem;
      color: #f5a623;
      display: flex;
      align-items: center;

      .icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
      }
    }
    .title {
      font-size: 1.2rem;
      font-weight: bold;
    }
  }
}
</style>
